{extend name="blog@public/basic" /}

{block name="style"}
<style>
    .article-praise {
        margin-top: 10px;
        margin-right: 200px;
        margin-bottom: 10px;
        margin-left: 200px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        text-align: center
    }

    .dfsj_ullist li a {
        color: #5a98de;
    }

    .dfsj_ullist li a:hover {
        color: #f74644;
        text-decoration: underline
    }

    .layui-icon.layui-icon-right {
        font-size: 10px !important
    }

    .layui-icon.layui-icon-praise {
        font-size: 25px !important
    }

    .layui-icon.layui-icon-praise:hover {
        color: #d32320
    }

    #p_btn {
        padding: 3em 0;
        text-align: center;
        line-height: 40px
    }

    #p_btn a {
        display: inline-block;
        width: 105px;
        height: 40px
    }

    #p_btn a:hover i, #p_btn a:hover span {
        color: #fff
    }

    #p_btn i {
        display: block;
        padding: 0;
        background: 0 0;
        color: #ed1c24;
        text-align: left;
        font-style: normal;
        cursor: pointer
    }

    #p_btn i span {
        margin-bottom: 10px;
        padding-bottom: 30px;
        color: #eb0028;
        font-size: 16px
    }

    #p_btn {
        padding: 3em 0;
        text-align: center;
        line-height: 24px
    }

    #p_btn a {
        display: inline-block;
        margin-right: 3px;
        padding-right: 4px;
        padding-left: 8px;
        background-color: #ddd5d5;
        vertical-align: top;
        white-space: nowrap
    }

    #p_btn a:hover {
        background-color: #db1f1f;
        text-decoration: none
    }

    #k_favorite {
        padding-left: 20px;
        background-position: -795px -344px
    }

    .vwthd a#k_favorite:hover {
        background-position: -795px -364px
    }

    #p_btn {
        padding: 3em 0;
        text-align: center;
        line-height: 40px
    }

    #p_btn a {
        display: inline-block;
        margin-right: 8px;
        padding-right: 0;
        padding-left: 75px;
        width: 105px;
        height: 40px;
        vertical-align: top;
        white-space: nowrap
    }

    #p_btn a#k_favorite {
        background-position: -333px -334px
    }

    #p_btn a#k_favorite:hover {
        background-position: -333px -374px
    }

    /*{if $is_mobile}*/
    .dfsj_ullist li {
        float: left;
        overflow: hidden;
        width: 45%;
        height: 30px;
        background-position: -991px -234px;
        line-height: 30px;
    }

    /*{else/}*/
    .dfsj_ullist li {
        float: left;
        overflow: hidden;
        padding-left: 5px;
        width: 32%;
        height: 30px;
        background-position: -991px -234px;
        line-height: 30px;
    }

    /*{/if}*/
</style>
{/block}

{block name="cotent"}
{include file="blog@public/nav" /}
<section class="container pt-20">

    <div class="row w_main_row">
        {if $is_mobile == true}
        {else/}
        {/if}

        <div class="col-lg-9 col-md-9 w_main_left">
            <div class="panel panel-default  mb-20">
                <div class="panel-body pt-10 pb-10">
                    <h2 class="c_titile">{$details.title|default=''}</h2>
                    <p class="box_c"><span class="d_time">发布时间：{$details.create_at|default=''}</span><span>作者：<a>{$details.nickname|default=''}</a></span><span>阅读量：{$details.clicks|default=''}</span></p>
                    <ul class="infos">
                        {$details.content|default=''|raw}
                    </ul>

                    <div class="keybq">
                        <p><span>标签</span>：
                            {foreach tag_list as $vo}
                            <a class="label label-default">{$vo.tagInfo.tag_title|default=''}</a>
                            {/foreach}
                    </div>

                    <!--<div id="p_btn" class="mtw mbm hm cl">-->
                    <!--<a id="k_favorite" data-href="#">-->
                    <!--<i class="layui-icon layui-icon-praise">-->
                    <!--<span id="favoritenumber">&nbsp;+19</span>-->
                    <!--</i>-->
                    <!--</a>-->
                    <!--</div>-->

                    <div class="nextinfo">
                        <p class="last">上一篇：<a data-href="{:url('@blog/article/details',['id'=>$last_article.id])}">{$last_article.title}</a></p>
                        <p class="next">下一篇：<a data-href="{:url('@blog/article/details',['id'=>$next_article.id])}">{$next_article.title}</a></p>
                    </div>

                </div>
            </div>

            <div class="panel panel-default  mb-20">
                <div class="tab-category">
                    <a data-href=""><strong>相关帖子</strong></a>
                </div>
                <div class="panel-body" style="margin: 0 3%;">
                    <!--<div class="line"></div>-->
                    <!--用于相关阅读-->
                    <ul class="dfsj_ullist cl">
                        {foreach relevant_list as $vo}
                        <li>
                            <span class="layui-icon layui-icon-right"></span>
                            <a data-href="{:url('@blog/article/details',['id'=>$vo.id])}">{$vo.title|default=''}</a>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>

            <div class="panel panel-default  mb-20">
                <div class="tab-category">
                    <a data-href=""><strong>评论内容</strong></a>
                </div>
                <div class="panel-body">
                    <div class="panel-body" style="margin: 0 3%;">
                        <div class="mb-20">
                            <ul class="commentList">
                                {foreach article_comment_list as $vo}
                                <li class="item cl"><a data-href="#"><i class="avatar size-L radius"><img alt="" src="{$vo.memberInfo.head_img|default=''}"></i></a>
                                    <div class="comment-main">
                                        <header class="comment-header">
                                            <div class="comment-meta">
                                                <a class="comment-author" data-href="#">{if !empty($vo.memberInfo.nickname)}{$vo.memberInfo.nickname|default=''}{else/}{$vo.memberInfo.username|default=''}{/if}</a>
                                                <time class="f-r">评论时间： {$vo.create_at|default=''}</time>
                                            </div>
                                        </header>
                                        <div class="comment-body"><p> {$vo.content|default=''|raw}</p></div>
                                    </div>
                                </li>
                                {/foreach}
                            </ul>

                        </div>
                        <div class="line"></div>
                        <!--用于评论-->
                        <div class="mt-20" id="ct">
                            <div id="err" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
                            <!--<textarea id="textarea1" name="comment" style="height:200px;" placeholder="看完不留一发？"> </textarea>-->
                            <div id="editor">
                            </div>
                            <div class="text-r mt-10">
                                <button id="addComment" class="btn btn-primary radius"> 发表评论</button>
                            </div>
                        </div>
                        <!---->
                        <!--&lt;!&ndash;用于回复&ndash;&gt;-->
                        <!--<div class="comment hidden mt-20">-->
                        <!--<div id="err2" class="Huialert Huialert-danger hidden radius">成功状态提示</div>-->
                        <!--<textarea class="textarea" style="height:100px;"> </textarea>-->
                        <!--<button onclick="hf(this);" type="button" class="btn btn-primary radius mt-10">回复</button>-->
                        <!--<a class="cancelReply f-r mt-10">取消回复</a>-->
                        <!--</div>-->

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <!--热门推荐-->
            <div class="bg-fff box-shadow radius mb-20">
                <div class="tab-category">
                    <a data-href=""><strong>推荐阅读</strong></a>
                </div>
                <div class="tab-category-item">
                    <ul class="index_recd">
                        {foreach recommend_list as $vo}
                        <li>
                            <a data-href="{:url('@blog/article/details',['id'=>$vo.id])}">{$vo.title|default=''}</a>
                            <p class="hits"><i class="Hui-iconfont" title="点击量">&#xe622;</i> {$vo.clicks|default=''}° </p>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>

            <!--图片-->
            <div class="bg-fff box-shadow radius mb-20">
                <div class="tab-category">
                    <a data-href=""><strong>扫我关注</strong></a>
                </div>
                <div class="tab-category-item">
                    <img src="__STATIC__/image/blog/weixin.jpg" class="img-responsive lazyload" alt="响应式图片">
                </div>
            </div>

        </div>
    </div>

</section>
{/block}

{block name="script"}
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.customConfig.menus = [
        // 'head',
        // 'bold',
        // 'italic',
        // 'underline',
        // 'foreColor',
        // 'backColor',
        // 'image',
        'emoticon',
        'code',
        'undo',
        'redo'
    ]
    editor.customConfig.uploadImgServer = '/upload'

    editor.create()

    //新增评论
    $("#addComment").click(function () {
        if (editor.txt.text() == '') {
            layer.msg('评论信息不可为空！', {icon: 2});
            return false;
        }
        $.request.post("{:url('@blog/article/add_comment')}", {
            article_id: "{$details.id|default=''}",
            member_id: "{$Think.session.member.id}",
            content: editor.txt.html(),
        }, function (res) {
            $.msg.success(res.msg, function () {
                parent.location.reload();
            });
        });
    });

</script>
{/block}